<template>
  <div class="wrap">
    <div style="overflow: hidden;">
      <div id="echartContainer" style="height:250px;float: left;"></div>
      <div id="echartContainer2" style="height:250px;float: left;">
        <div class="title">总销售量 {{total}}</div>
        <div class="wrap">
          <div class="room-temperature-milk">
            <span class="room">{{roomTotal}}<br>低温</span>
          </div>
          <div class="low-temperature-milk">
            <span class="low">{{lowTotal}}<br>常温</span>
          </div>
        </div>
      </div>
    </div>
    <!--<div id="echartContainer2" style="height: 350px;margin-top: 15px;"></div>-->
    <div id="echartContainer4" style="height: 350px;margin-top: 15px;"></div>
    <div id="echartContainer3" style="height: 350px;margin-top: 15px;"></div>

  </div>
</template>

<script>
  require('echarts/map/js/china');
  export default {
    name: 'DateState',
    data () {
      return {
        total: 0,
        roomTotal: 0,
        lowTotal: 0
      }
    },
    methods: {
      loadingSuccuss () {
        this.$emit('getLoadingFinished', false)
      },
      getMap(){
        this.axios.get(this.api.getUserCityDistribution)
          .then((res)=>{
          let tdata = [],
            tgeoCoordMap = new Object(),
            totalnum = 0;
          if(res.data.status === '1'){
              let lists = res.data.details.list;
              for(let i = 0; i < lists.length; i ++){
                let item = {};
                let city = lists[i].city
                console.log(city)
                item.name = lists[i].city;
                item.value = lists[i].number;
                tdata.push(item);
                tgeoCoordMap[city] = JSON.parse(`[${lists[i].longitude},${lists[i].latitude}]`)
              }
            totalnum = res.data.details.totalnum
            }
          this.drawEcharts3(tdata,tgeoCoordMap,totalnum);
          this.loadingSuccuss()
          })
          .catch((err)=>{
            this.loadingSuccuss()
          })
      },
      getPieCharts(){
        this.axios.get(this.api.findsSalesQuota)
        .then(res=>{
          let tdata = [],
              sdata = [],
              totalMoney
          if(res.data.status==='1'){
              let _data = res.data.details;
              for(let i = 0; i < _data.length; i ++){
                let item = new Object()
                tdata.push(_data[i].name);
                item.value = (_data[i].value).replace(/,/g, '');
                item.name = _data[i].name;
                sdata.push(item)
              }
              totalMoney = (res.data.totalsalesquota).replace(/,/, '');
          }
          this.drawEcharts(tdata,sdata,totalMoney);
        })
      },
      drawEcharts(_tdata,_sdata,_totalMoney){
        document.getElementById('echartContainer').style.width = window.innerWidth/2 + 'px';
        var myChart = this.$echarts.init(document.getElementById('echartContainer'))
// 绘制图表
        var option = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position: ['50%', '50%']
          },
          title: {
            text: '概况',
            x: 'left',
            subtext: '总销售额 '+_totalMoney,
            subtextStyle: {
              fontSize: 14
            }
          },
          legend: {
            orient: 'horizontal',
            x: 'center',
            y: 'bottom',
            data:_tdata
          },
          series: [
            {
              name:'销售额',
              type:'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              top: 'top',
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '16',
                    fontWeight: 'bold'
                  }
                }
              },
              data:_sdata
            }
          ]
        };
        myChart.setOption(option)
      },
      getPieCharts2(){
        this.axios.get(this.api.findSalesVolume)
        .then(res => {
          let tdata = [],
            sdata = [],
            totalAmount
          if(res.data.status==='1'){
            let _data = res.data.details;
            for(let i = 0; i < _data.length; i ++){
              let item = new Object()
              tdata.push(_data[i].name);
              item.value = (_data[i].value).replace(/,/g, '');
              item.name = _data[i].name;
              sdata.push(item)
            }
            totalAmount = (res.data.totalsalesvolume);
          }
          this.drawEcharts2(tdata,sdata,totalAmount);
        })
      },
      drawEcharts2(_tdata,_sdata,_totalAmount){
        document.getElementById('echartContainer2').style.width = window.innerWidth/2-10 + 'px';
        document.querySelector('.room-temperature-milk').style.height = (window.innerWidth/2-10)/2.2 + 'px';
        document.querySelector('.room-temperature-milk').style.width = (window.innerWidth/2-10)/2.2 + 'px';
        document.querySelector('.low-temperature-milk').style.height = (window.innerWidth/2-10)/2.2 + 'px';
        document.querySelector('.low-temperature-milk').style.width = (window.innerWidth/2-10)/2.2 + 'px';
        this.total = _totalAmount;
        this.roomTotal = _sdata[0].value;
        this.lowTotal = _sdata[1].value;
//        var myChart = this.$echarts.init(document.getElementById('echartContainer2'))
//        var option = {
//          title : {
//            text: '销售量概况',
//            subtext: `总销售量 ${_totalAmount}`,
//            subtextStyle:{
//              align: 'center',
//              fontSize: 14
//            },
//            x:'center'
//          },
//          tooltip : {
//            trigger: 'item',
//            formatter: "{a} <br/>{b} : {c} ({d}%)",
//            position: ['-50%', '25%']
//          },
//          legend: {
//            orient: 'horizontal',
//            x: 'center',
//            y: 'bottom',
//            data: _tdata
//          },
//          series : [
//            {
//              name: '销售量',
//              type: 'pie',
//              radius : '75%',
//              center: ['50%', '50%'],
//              label: {
//                normal: {
//                  show: false
//                },
//                emphasis: {
//                  show: false
//                }
//              },
//              labelLine: {
//                normal: {
//                  show: false
//                }
//              },
//              data:_sdata,
//              itemStyle: {
//                emphasis: {
//                  shadowBlur: 10,
//                  shadowOffsetX: 0,
//                  shadowColor: 'rgba(0, 0, 0, 0.5)'
//                }
//              }
//            }
//          ]
//        };
//        myChart.setOption(option)
      },
      /*
      * 用户分布地图
      * */
      drawEcharts3(tdata,tgeoCoordMap,totalUser){
        document.getElementById('echartContainer3').style.width = window.innerWidth + 'px';
        var myChart = this.$echarts.init(document.getElementById('echartContainer3'))
        var data = tdata;
        var geoCoordMap = tgeoCoordMap;

        var convertData = function (data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };
        var option = {
//          backgroundColor: '#404a59',
          backgroundColor: '#fff',
          title: {
            text: '用户分布',
            subtext: `总用户${totalUser}`,
            left: 'center',
            textStyle: {
//              color: '#fff'
            }
          },
          tooltip : {
            trigger: 'item'
          },
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: '#323c48',
                borderColor: '#111'
              },
              emphasis: {
                areaColor: '#2a333d'
              }
            }
          },
          series : [
            {
              name: 'pm2.5',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: convertData(data),
              symbolSize: function (val) {
                return Math.log(val[2]*1000000);
              },
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: false
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#ddb926'
                }
              }
            },
            {
              name: 'Top 5',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
              }).slice(0, 11)),
              symbolSize: function (val) {
                return Math.log(val[2]*1000000);
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: '{b}',
                  position: 'right',
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: '#f4e925',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1
            }
          ]
        };
// 绘制图表
        myChart.setOption(option)
      },
      drawEcharts14(){
        document.getElementById('echartContainer4').style.width = window.innerWidth + 'px';
        var myChart = this.$echarts.init(document.getElementById('echartContainer4'))
        myChart.showLoading();
        this.$jquery.get('../../src/mocha/weibo.json', function (weiboData) {
          myChart.hideLoading();
          weiboData = weiboData.map(function (serieData, idx) {
            var px = serieData[0] / 1000;
            var py = serieData[1] / 1000;
            var res = [[px, py]];

            for (var i = 2; i < serieData.length; i += 2) {
              var dx = serieData[i] / 1000;
              var dy = serieData[i + 1] / 1000;
              var x = px + dx;
              var y = py + dy;
              res.push([x.toFixed(2), y.toFixed(2), 1]);
              px = x;
              py = y;
            }
            return res;
          });
          myChart.setOption({
            backgroundColor: '#404a59',
            title : {
              text: '微博签到数据点亮中国',
              subtext: 'From ThinkGIS',
              sublink: 'http://www.thinkgis.cn/public/sina',
              left: 'center',
              top: 'top',
              textStyle: {
                color: '#fff'
              }
            },
            tooltip: {},
            legend: {
              left: 'left',
              data: ['强', '中', '弱'],
              textStyle: {
                color: '#ccc'
              }
            },
            geo: {
              map: 'china',
              label: {
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  areaColor: '#323c48',
                  borderColor: '#111'
                },
                emphasis: {
                  areaColor: '#2a333d'
                }
              }
            },
            series: [{
              name: '弱',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbolSize: 1,
              large: true,
              itemStyle: {
                normal: {
                  shadowBlur: 2,
                  shadowColor: 'rgba(37, 140, 249, 0.8)',
                  color: 'rgba(37, 140, 249, 0.8)'
                }
              },
              data: weiboData[0]
            }, {
              name: '中',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbolSize: 1,
              large: true,
              itemStyle: {
                normal: {
                  shadowBlur: 2,
                  shadowColor: 'rgba(14, 241, 242, 0.8)',
                  color: 'rgba(14, 241, 242, 0.8)'
                }
              },
              data: weiboData[1]
            }, {
              name: '强',
              type: 'scatter',
              coordinateSystem: 'geo',
              symbolSize: 1,
              large: true,
              itemStyle: {
                normal: {
                  shadowBlur: 2,
                  shadowColor: 'rgba(255, 255, 255, 0.8)',
                  color: 'rgba(255, 255, 255, 0.8)'
                }
              },
              data: weiboData[2]
            }]
          });
        });
      },
      getLineCharts(){
        this.axios.get(this.api.findSumQuotaAndVolume)
        .then(res => {
          let lData = [],
              xData = [],
              sData = []
          if(res.data.status === '1'){
            xData = res.data.details.xaxis.data;
            let _data = res.data.details;
            for(let i = 0; i < _data.series.length; i ++){
              let item = new Object();
              lData.push(_data.series[i].name);
              item.name = _data.series[i].name;
              item.type = 'line';
              item.stack = '总量';
              item.data = _data.series[i].data.map(per=>per.replace(/,/g, ''));
              sData.push(item);
            }
          }
          this.drawLineCharts(lData,xData,sData);
        })
        .catch(err => {
          console.log(err)
        })
      },
      drawLineCharts(_lData,_xData,_sData){
        document.getElementById('echartContainer4').style.width = window.innerWidth + 'px';
        let myChart = this.$echarts.init(document.getElementById('echartContainer4'))
        let option = {
          title: {
            text: '最近12个月走势',
            x: 'left'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:_lData,
            left: 'right'
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            show: false
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: _xData
          },
          yAxis: {
            type: 'value',
            name: '单位：元'
          },
          series: _sData
        };
        // 绘制图表
        myChart.setOption(option)
      }
    },
    mounted () {
      this.getMap();
      this.getPieCharts();
      this.getPieCharts2();
      this.getLineCharts();
//      this.drawEcharts2();
//      this.drawEcharts3();
//      this.drawEcharts4();
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
  .title {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #aaa;
  }
  #echartContainer2 {
    box-sizing: border-box;
  }
  #echartContainer2 .wrap div {
    display: inline-block;
    border-radius: 50%;
    color: #fff;
    position: relative;
  }
  #echartContainer2 .wrap div:first-child {
    background-color: #c03736;
    margin-right: 2.5px;
  }
  #echartContainer2 .wrap div:last-child {
    background-color: #304553;
    margin-left: 2.5px;
  }
  .room,.low {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    text-align: center;
  }
  #echartContainer2 .wrap {
    margin-top: 45px;
    text-align: center;
  }
</style>
